<template>
  <div class="table">
    <el-button @click="add()">添加</el-button>
    <el-table :data="tableData" border show-summary :row-class-name="tableRowClassName">
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="pname" label="名称" width="100" />
      <el-table-column prop="pbrand" label="型号" width="100" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="configuration" label="配置" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
          <!--<el-button size="mini" type="danger" @click="centerDialogVisible = true">删除</el-button>-->
          <el-button size="mini" type="danger" @click="centerDialogVisible = true">删除</el-button>
          <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center
          >
            <span>需要注意的是内容是默认不居中的</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" center-dialog-visible @click="centerDialogVisible = false">确 定</el-button>
              </span>
          </el-dialog>

          <!--<el-popconfirm-->
          <!--title="这是一段内容确定删除吗？"-->
          <!--&gt;-->
          <!--<el-button size="mini" @onConfirm="del(scope.row.id)">删除</el-button>-->
          <!--</el-popconfirm>-->
        </template>
      </el-table-column>
    </el-table>

    <!--<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" @close="close()">

      <el-form>
        <el-form-item label="商品编号" :label-width="formLabelWidth">
          <el-input v-model="phone.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="phone.pname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品品牌" :label-width="formLabelWidth">
          <el-input v-model="phone.pbrand" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="phone.price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品配置" :label-width="formLabelWidth">
          <el-input v-model="phone.configuration" autocomplete="off" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="ok()">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'List',
    data() {
      return {
        tableData: [
          {
            id: '',
            pname: '',
            pbrand: '',
            price: '',
            configuration: ''
          }
        ],
        phone: {
          id: '',
          pname: '',
          pbrand: '',
          price: '',
          configuration: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
        centerDialogVisible: false
      }
    },
    created: function() {
      this.GetPhoneInfo()
    },
    methods: {
      del(res) {
        console.log(res)
        this.$http.delete('phone?id=' + res).then(res => {
          this.$message({
            showClose: true,
            message: '删除成功！',
            type: 'success'
          })
        })
        this.GetPhoneInfo()
      },
      add() {
        this.dialogFormVisible = true
      },
      edit(res) {
        // 打开弹窗
        this.dialogFormVisible = true
        this.phone = res
      },
      ok() {
        console.log(this.phone)
        if (this.phone.id == '' || this.phone.id == null) {
          this.$http.post('phone?phone', this.phone)
            .then(res => {
              console.log(res)
              this.dialogFormVisible = false
              this.GetPhoneInfo()
            }).catch()
        } else {
          this.$http.put('phone?phone', this.phone)
            .then(res => {
              console.log(res)
              this.dialogFormVisible = false
              this.GetPhoneInfo()
            }).catch()
        }
      },
      cancel(res) {
        // 关闭弹窗
        this.dialogFormVisible = false
        this.phone = {}
        console.log(res)
      },
      close(){
        this.phone = {}
      },
      GetPhoneInfo() {
        const constinfo = this.$http
          .get('phone')
          .then(tm => {
            this.tableData = tm.data.data.records
          })
          .catch(error => {
            console.log(error)
          })
      },
      handleDelete(index, row) {
        console.log(index, row)
        // $http.delete('phone?id=' + row.id)
        // GetPhoneInfo()
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 == 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },

    }
  }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
